<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浏览器窗口大小的自适应布局</title>
		<script>
			window.addEventListener('load',function(){
				var myDiv = document.querySelector('div');
				window.addEventListener('resize',function(){
					console.log('窗口大小变化了');
					console.log(window.innerWidth);
					if(window.innerWidth <=1000){
						myDiv.style.display = 'none';
					}else {
						myDiv.style.display = 'block';
					}
				})
			})
			
		</script>
		<style>
			div {
				width: 500px;
				height: 500px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div></div>
		
	</body>
</html>